//统计粒度选择框组件
import { ElMessage } from 'element-plus/lib/index';
import {
  computed,
  defineComponent,
  reactive,
  ref,
  watch,
  onMounted
} from 'vue';
import '@/components/TimePeriodSelect/index.scss';
import API from '@/services';
const timePeriodSelect = defineComponent({
  name: 'TimePeriodSelect',
  props: {
    dialogVisible: {
      type: Boolean
    }
  },
  emits: ['timePeriodChange', 'update:dialogVisible', 'optionChange', 'remote'],
  setup: (props, { slots, attrs, emit }) => {
    const currentTimePeriod = ref();

    /* 统计粒度下拉list */
    const timePeriodList: any = ref([]);

    let currentItem = reactive({});

    const dialogVisibles = computed({
      get: () => props.dialogVisible,
      set: (v) => emit('update:dialogVisible', v)
    });

    /* 获取统计粒度下拉列表 */
    const getTimePeriodList = async (cnName?: string) => {
      try {
        const { code, data } = await API.timePeriod.getTimePeriodNameHint({
          cnName
        });
        if (code === 200 && Array.isArray(data)) {
          timePeriodList.value = data;
        }
      } catch (error) {
        console.log(error);
      }
    };

    watch(
      () => props?.dialogVisible,
      (bol) => {
        bol && getTimePeriodList();
      }
    );

    onMounted(() => { });

    return () => {
      const { dialogVisible } = props;
      return (
        <el-dialog
          customClass="cycle-time-dialog"
          v-model={dialogVisible}
          title="选择统计粒度"
          width="570px"
          onClose={() => {
            dialogVisibles.value = false;
            currentTimePeriod.value = '';
          }}
          v-slots={{
            footer: () => (
              <>
                <el-button
                  onClick={() => {
                    dialogVisibles.value = false;
                  }}
                >
                  取消
                </el-button>
                <el-button
                  onClick={() => {
                    if (!currentTimePeriod.value) {
                      ElMessage.warning('请选择统计粒度');
                      return;
                    }
                    emit('timePeriodChange', currentItem);
                    dialogVisibles.value = false;
                  }}
                  type="primary"
                >
                  确定
                </el-button>
              </>
            )
          }}
        >
          <el-select
            size="large"
            popper-class="dimention-select"
            filterable
            remote={true}
            v-model={currentTimePeriod.value}
            remote-method={(content: string) => getTimePeriodList(content)}
            placeholder="请选择统计粒度"
          >
            {timePeriodList.value?.map((v: any, i: number) => {
              return (
                <el-option
                  label={v.cnName}
                  value={v.id}
                  onClick={() => (currentItem = v)}
                ></el-option>
              );
            })}
          </el-select>
        </el-dialog>
      );
    };
  }
});
export default timePeriodSelect;
